<template>
    <div>
        <el-row :gutter="24" style="margin-top:15px;">
            <el-col :span="10">
                <el-popconfirm @onConfirm="fun_attsave" title="确认已经完成所有账单解析并检查无误?">
                    <el-button style="margin-left:10px;" slot="reference" icon="el-icon-check" type="success"
                               size="small">提交保存
                    </el-button>
                </el-popconfirm>
                <el-tooltip style="margin-left:10px;" content="如果一个文件多个账单则新建">
                    <el-button @click="fun_billadd" icon="el-icon-plus" type="primary" size="small">新建账单</el-button>
                </el-tooltip>
            </el-col>
        </el-row>
        <div class="bill_cls" v-for="(billitem,index) in data_attach.billRecordList" :key="index">
            <el-row :gutter="24">
                <el-form label-width="100px">
                    <el-col>
                        <el-tooltip content="将此账单复制成一个新的账单">
                            <el-button @click="fun_billcopy(billitem.tableid)" size="small" icon="el-icon-copy-document"
                                       type="primary" circle></el-button>
                        </el-tooltip>
                        <el-tooltip style="margin-left:20px;" content="删除当前账单">
                            <el-popconfirm @onConfirm="fun_billdel(billitem.tableid)" title="确定要删除?">
                                <el-button type="danger" size="small" icon="el-icon-delete" slot="reference"
                                           circle></el-button>
                            </el-popconfirm>
                        </el-tooltip>

                    </el-col>
                </el-form>
            </el-row>


            <vxe-table border show-overflow show-footer :ref="'xTable'+billitem.tableid"
                       :data="billitem.billRecordDetailList"
                       :mouse-config="{selected: true}" :edit-rules="data_datacheck" :footer-method="footerMethod"
                       :footer-cell-class-name="footerCellClassName"
                       :checkbox-config="{range: true}"
                       :keyboard-config="{isArrow: true, isDel: true, isEnter: true, isTab: true, isEdit: true,enterToTab:true, editMethod:(config)=>editMethod(config,'xTable'+billitem.tableid)}"
                       :edit-config="{showStatus: true,trigger: 'dblclick', mode: 'cell'}"
                       @keydown="fun_tablekeydown({$event},billitem.tableid)">
                <vxe-column field="costName" width="180" title="原始费用名称"></vxe-column>
                <vxe-column field="myshippingSysCode" width="180" title="费用名称"
                            :edit-render="{name: 'ElSelect',options:dict_fee,props:{filterable:true,clearable:true},autofocus: '.el-input__inner'}"></vxe-column>
                <vxe-column field="feeStandard" title="标准" width="140"
                            :edit-render="{name: 'ElSelect',options:dict_feestandard,props:{filterable:true,clearable:true},autofocus: '.el-input__inner'}"></vxe-column>
                <vxe-column field="unitPrice" title="单价" width="160"
                            :edit-render="{name: '$input',props: {type: 'number',autoselect: true}}"></vxe-column>
                <vxe-column field="quantity" title="数量" width="100"
                            :edit-render="{name: '$input',props: {type: 'number',autoselect: true}}"></vxe-column>
                <vxe-column field="amount" title="金额" width="160"
                            :edit-render="{name: '$input',props: {type: 'number',autoselect: true}}"></vxe-column>
                <vxe-column field="currency" title="币别" width="100"
                            :edit-render="{name: '$select',options:dict_currency}"></vxe-column>
                <vxe-column field="exchangeRate" title="汇率" width="100" :edit-render="{name: '$input',autoselect: true}"></vxe-column>
                <vxe-column field="remark" title="备注" :edit-render="{name: '$input',autoselect: true}"></vxe-column>
                <vxe-column :span="1" width="60">
                    <template #default="{row}">
                        <vxe-button status="danger" size="small" @click="fun_billdetailrow_del(billitem.tableid,row)"
                                    icon="el-icon-delete" circle></vxe-button>
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
        <!--<div>
            <p> Git代码: <a href="https://gitee.com/zhbog/vxe.git">https://gitee.com/zhbog/vxe.git</a></p>
            键盘控制参考资料：<a href="https://xuliangzhan_admin.gitee.io/vxe-table/#/table/edit/keyboardEdit">
            https://xuliangzhan_admin.gitee.io/vxe-table/#/table/edit/keyboardEdit</a>
            <p>
                后续功能需求 1 费用名称和标准 键盘控制移入后空格自动获取下拉菜单焦点下拉使用el-select输入搜索筛选要求自动获取到焦点可以键盘和鼠标控制
            </p>
            <p>2 键盘向下箭头自动新建列(已经实现)并将交单自动定位到第一编辑列位置(费用名称)</p>
        </div>-->
    </div>


</template>

<script>
    import VXETable from 'vxe-table'
    import VXETablePluginElement from 'vxe-table-plugin-element'
    import 'vxe-table-plugin-element/dist/style.css'
    VXETable.use(VXETablePluginElement)
    export default {
        data() {
            return {
                workgid: "",
                workdata: {},
                data_attach: {status: "ok", billRecordList: []},
                activeNames: [1, 2, 3],
                billaddinit: {
                    payingFor: "",
                    bookingBill: "",
                    portOfLoading: "",
                    unloadingPort: "",
                    sailingDate: "",
                    totalrmb: 0,
                    totalusd: 0,
                    billRecordDetailList: []
                },
                billDecailinit: {
                    id: 0,
                    myshippingSysName: "",
                    myshippingSysCode:'',
                    feeStandard: "",
                    unitPrice: 0,
                    quantity: 1,
                    amount: 0,
                    currency: "",
                    exchangeRate: "",
                    remark: ""
                }
                ,
                dict_currency: [
                        {
                    "indexint": 0,
                    "groupName": "currency",
                    "key": "RMB",
                    "value": "RMB",
                    "title": "China",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "currency",
                    "key": "USD",
                    "value": "USD",
                    "title": "USA Dollar",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "currency",
                    "key": "THB",
                    "value": "THB",
                    "title": "Thai Baht",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "currency",
                    "key": "JPY",
                    "value": "JPY",
                    "title": "Japan",
                    "memo": null
                }],
                dict_fee: [
                        {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A035",
                    "value": "A035",
                    "title": "晚单费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A020",
                    "value": "A020",
                    "title": "海运费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A012",
                    "value": "A012",
                    "title": "ISF申报费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A025",
                    "value": "A025",
                    "title": "铅封费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A024",
                    "value": "A024",
                    "title": "设备交接费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A003",
                    "value": "A003",
                    "title": "机械使用费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A013",
                    "value": "A013",
                    "title": "机械费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A006",
                    "value": "A006",
                    "title": "仓库信息费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A016",
                    "value": "A016",
                    "title": "燃油附加费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A029",
                    "value": "A029",
                    "title": "HAZ HAZ ADDITIONAL",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A038",
                    "value": "A038",
                    "title": "CDC CDDC CORRECT FEE",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A002",
                    "value": "A002",
                    "title": "还柜纸打单费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A005",
                    "value": "A005",
                    "title": "其他",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A023",
                    "value": "A023",
                    "title": "单证费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A031",
                    "value": "A031",
                    "title": "PCT PANAMA CANAL",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A004",
                    "value": "A004",
                    "title": "码头拥挤费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A001",
                    "value": "A001",
                    "title": "拖车费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A032",
                    "value": "A032",
                    "title": "CSS CARRIER",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A011",
                    "value": "A011",
                    "title": "清关费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A019",
                    "value": "A019",
                    "title": "港口附加费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A028",
                    "value": "A028",
                    "title": "CSS CARRIER SECURITY",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A008",
                    "value": "A008",
                    "title": "滞港费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A015",
                    "value": "A015",
                    "title": "码头操作费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A039",
                    "value": "A039",
                    "title": "场站费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A021",
                    "value": "A021",
                    "title": "CSS CARRIER",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A010",
                    "value": "A010",
                    "title": "关税",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A027",
                    "value": "A027",
                    "title": "OBS ONE BUNKER",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A022",
                    "value": "A022",
                    "title": "CDD CARGO",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A014",
                    "value": "A014",
                    "title": "换单费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A009",
                    "value": "A009",
                    "title": "待时费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A026",
                    "value": "A026",
                    "title": "码头通行费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A018",
                    "value": "A018",
                    "title": "码头附加费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A017",
                    "value": "A017",
                    "title": "电放费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A034",
                    "value": "A034",
                    "title": "改单费",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A033",
                    "value": "A033",
                    "title": "AMS ADVANCE MANIFEST",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A036",
                    "value": "A036",
                    "title": "TSD TERMINAL",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A030",
                    "value": "A030",
                    "title": "PSS PEAK SEASON",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "fee",
                    "key": "A037",
                    "value": "A037",
                    "title": "ECA ECA REG",
                    "memo": null
                }, {"indexint": 0, "groupName": "fee", "key": "A007", "value": "A007", "title": "信息费", "memo": null}],
                dict_feestandard: [
                        {
                    "indexint": 0,
                    "groupName": "feestandard",
                    "key": "BILL",
                    "value": "BILL",
                    "title": "票",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "feestandard",
                    "key": "PACKAGES",
                    "value": "PACKAGES",
                    "title": "件数",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "feestandard",
                    "key": "CBM",
                    "value": "CBM",
                    "title": "尺码",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "feestandard",
                    "key": "CTN",
                    "value": "CTN",
                    "title": "箱",
                    "memo": null
                }, {
                    "indexint": 0,
                    "groupName": "feestandard",
                    "key": "KGS",
                    "value": "KGS",
                    "title": "公斤",
                    "memo": null
                }],
                data_datacheck: {//表格数据校验
                    unitPrice: [{type: 'number', message: '必须是数值！'}],
                    quantity: [{type: 'number', message: '必须是数值！'}]
                }

            }
        },
        created() {

        },
        mounted() {
            this.dict_currency.forEach(item => {
                item.label = item.title
            })
            this.dict_fee.forEach(item => {
                item.label = item.title
            })
            this.dict_feestandard.forEach(item => {
                item.label = item.title
            })
            this.fun_billadd();
        },
        methods: {
            fun_getbilltotal() {
                let rmbtotal = 0;
                let usdtotal = 0;
                for (let bill of this.data_attach.billRecordList) {
                    for (let item of bill.billRecordDetailList) {

                        if (item.currency == "RMB") {
                            rmbtotal += Number(item.amount)
                        }
                        if (item.currency == "USD") {
                            usdtotal += Number(item.amount)
                        }
                    }
                }
                return "RMB:" + rmbtotal + "   USD:" + usdtotal
            },
            editMethod({row, column}, refid) {
                let talbe = this.$refs[refid]
                // 重写默认的覆盖式，改为追加式
                talbe[0].setActiveCell(row, column)
            },
            footerMethod({columns, data}) {
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex == 2 || columnIndex == 3) {
                            data.forEach(item => {
                                if (item.unitPrice && item.quantity) {
                                    item.amount = (item.unitPrice * item.quantity).toFixed(2)
                                }
                            })

                        }

                        if (['quantity'].includes(column.property)) {
                            return "合计:";
                        }
                        if (['amount'].includes(column.property)) {
                            var rmbtotal = 0, usdtotal = 0;
                            data.forEach(item => {
                                if (item) {
                                    if (item.currency == "RMB") {
                                        rmbtotal += Number(item.amount)
                                    }
                                    if (item.currency == "USD") {
                                        usdtotal += Number(item.amount)
                                    }

                                }
                            });
                            return "RMB:" + rmbtotal + " \r\n  USD:" + usdtotal
                        }

                    })
                ]
            },
            footerCellClassName({$rowIndex, columnIndex}) {
                if (columnIndex === 3) {
                    if ($rowIndex === 0) {
                        return 'cls_total'
                    }
                }

            },

            fun_billadd() {//账单增加
                let bill = this.$thisapp.copyobj(this.billaddinit)
                //bill.billRecordDetailList.push()
                if (!this.data_attach.billRecordList) {
                    this.data_attach.billRecordList = []
                }
                bill.tableid = this.data_attach.billRecordList.length
                this.data_attach.billRecordList.push(bill)
                this.fun_billddetail_add(bill.tableid)
                console.log(this.data_attach.billRecordList)
            },
            fun_billcopy(tableid) {
                let bill = this.$thisapp.copyobj(this.data_attach.billRecordList.filter(item => item.tableid == tableid)[0])
                bill.tableid = this.data_attach.billRecordList.length
                bill.gid = null
                this.data_attach.billRecordList.push(bill)
            },
            fun_attsave() {
                //提交保存
                this.fun_attdataformat()
                attachsave(this.data_attach).then(res => {
                    this.data_attach.status = "Ok";
                    this.fun_workupstatus(100)
                    this.$thisapp.msg('保存成功！');
                })

            },
            //附件数据格式化
            fun_attdataformat() {
                this.data_attach.billRecordList.forEach(bill => {
                    bill.billRecordDetailList.forEach(detial => {
                        let fl = this.dict_fee.filter(item => item.value == detial.myshippingSysCode)

                        if (fl && fl.length > 0) {

                            detial.myshippingSysName = fl[0].title
                        }
                    })
                })

                return true
            }
            ,
            fun_attcheck() {
                //提交审核
                this.fun_attdataformat()
                attachcheck(this.data_attach).then(res => {
                    this.data_attach.status = "Ok";
                    this.fun_workupstatus(100)
                    this.$thisapp.msg('审核成功！');

                })

            },
            fun_attcancel() {//忽略取消此任务
                attachupstatus({Gid: this.data_attach.gid, status: 'Cancel'}).then(res => {
                    this.data_attach.status = "Cancel";
                    this.fun_workupstatus(101)
                    this.$thisapp.msg('操作成功！');
                })

            }
            ,
            //移除账单
            fun_billdel(tableid) {
                let getlist = this.data_attach.billRecordList.filter(item => item.tableid != tableid);
                for (let index = 0; index < getlist.length; index++) {
                    getlist[index].tableid = index
                }
                this.data_attach.billRecordList = this.$thisapp.copyobj(getlist);
                this.$thisapp.msg('删除成功')
            },
            fun_billdetailrow_del(billid, data) {//订单中移除明细

                let billdlist = this.data_attach.billRecordList[billid].billRecordDetailList;
                let newlist = billdlist.filter(item => item.id != data.id)
                for (let ii = 0; ii < newlist.length; ii++) {
                    newlist[ii].id = ii
                }
                this.data_attach.billRecordList[billid].billRecordDetailList = newlist
            },
            fun_billddetail_add(billid) {//订单中追加一个明细
                let _addc = this.$thisapp.copyobj(this.billDecailinit);
                let billdlist = this.data_attach.billRecordList[billid].billRecordDetailList;
                _addc.id = billdlist.length
                billdlist.push(_addc)
                for (let ii = 0; ii < billdlist.length; ii++) {
                    billdlist[ii].id = ii
                }

            },
            fun_tablekeydown(eve, billtableid) {
                let that = this
                let keycode = eve.$event.$event.keyCode;
                if (keycode == 40) {
                    let rowid = eve.$event.$table.getSelectedCell().row.id
                    let bill = this.data_attach.billRecordList.filter(item => item.tableid == billtableid)[0]
                    console.log(rowid)
                    if (rowid == bill.billRecordDetailList.length - 1) {
                        this.fun_billddetail_add(billtableid)
                        this.$nextTick(()=>{
                            that.$refs['xTable'+billtableid][0].setActiveCell(bill.billRecordDetailList[bill.billRecordDetailList.length - 1],'myshippingSysCode')
                        })
                    }
                }
            },
            fun_dictget(dictlist, value) {
                var dl = dictlist.filter(item => item.value == value)
                if (dl && dl.length > 0) {
                    return dl[0]
                } else {
                    dl = {key: value, title: value, value: value, label: value}
                }
                return dl
            },
            fun_workupstatus(status) {//修改任务状态
                let gid = this.workdata.gid
                upstatus(gid, status).then((res) => {
                });
            },
            fun_inset(data) {
                console.log(data)
            }
        }
    }


</script>

<style>
    #app {
        width: 99%;
    }

    .el-input__inner {
        height: 34px;
        line-height: 34px;
    }

    .bill_cls {
        padding: 15px 0px;
        border-bottom: 2px dashed #e8eaec;
    }

    .bill_cls:last-child {
        border-bottom: none;
    }

    .cls_total {
        font-size: 16px;
        color: #409EFF;
        font-weight: 900;
        text-align: right;
    }

    /*失败原因 */
    .failure-reason {
        margin-top: 5px;
    }

    .failure-reason div {
        color: #f45e5e;
        font-size: 14px;
    }

    .failure-reason .el-icon-warning {
        margin-right: 5px;
    }

    .file-download a span.el-link--inner {
        border: none !important;
        padding-right: 0px;
    }

    .information-list {
        margin-top: 3px;
    }

    .information-list span {
        border-right: 2px solid #d8d8d8;
        padding-right: 10px;
        border-radius: 2px;
    }

    .information-list span b {
        color: #858585;
        font-weight: normal;
    }

    .vxe-header--column .vxe-cell--edit-icon, .vxe-header--column .vxe-cell-help-icon {
        margin-top: -4px;
    }

    .vxe-table--header thead tr th:first-child, .vxe-table--body tbody tr td:first-child {
        padding-left: 10px !important;
    }
</style>
